import React, { forwardRef } from 'react';
import { Col, Row, DatePicker } from 'antd';
import moment from 'moment/moment';
import styles from './index.less';

const { RangePicker } = DatePicker;

const ChooseDate = forwardRef((props, ref) => {
  const { value, onChange } = props;

  const disabledDate = current =>
    current &&
    current >
      moment()
        .endOf('day')
        .subtract(0, 'days');

  const dataClick = data => {
    const setFieldsValueDate = {
      startDate: moment()
        .startOf('day')
        .subtract(data, 'days'),
      endDate: moment()
        .endOf('day')
        .subtract(data == 1 ? 1 : 0, 'days'),
    };
    onChange([setFieldsValueDate.startDate, setFieldsValueDate.endDate]);
  };

  return (
    <Row type="flex" gutter={[10, 0]}>
      <Col>
        <a className={styles.select_date} onClick={dataClick.bind(null, 0)}>
          今天
        </a>
        <a className={styles.select_date} onClick={dataClick.bind(null, 1)}>
          昨天
        </a>
        <a className={styles.select_date} onClick={dataClick.bind(null, 6)}>
          近7日
        </a>
      </Col>
      <Col>
        <RangePicker
          onChange={onChange}
          ref={ref}
          value={value}
          style={{ width: '280px' }}
          placeholder={['开始日期', '结束日期']}
          disabledDate={disabledDate}
        />
      </Col>
    </Row>
  );
});

export default ChooseDate;
